<template>
  <div class="storyboard-container">
    <toast-message ref="toast" />

    <div class="input-section">
      <api-key-verifier v-if="isSmartMode" />

      <el-form label-position="top">
        <el-form-item>
          <div class="mode-switch">
            <span>分镜模式：</span>
            <el-switch
              v-model="isSmartMode"
              active-text="智能分镜"
              inactive-text="手动分镜"
              @change="handleModeChange"
            />
          </div>
        </el-form-item>

        <el-form-item label="场景文本">
          <el-input
            v-model="descriptor"
            type="textarea"
            :autosize="{ minRows: 10, maxRows: 20 }"
            placeholder="请输入场景描述..."
            :disabled="generating"
          />
        </el-form-item>

        <el-form-item>
          <div class="button-group">
            <el-button
              type="primary"
              :loading="generating"
              :disabled="generating"
              @click="handleGenerate"
              class="generate-button"
            >
              {{ isSmartMode ? '智能分镜' : '手动分镜' }}
            </el-button>

            <el-button
              :disabled="generating"
              @click="handleClear"
              class="clear-button"
            >
              清空
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import ToastMessage from './ToastMessage.vue'
import ApiKeyVerifier from './ApiKeyVerifier.vue'
import { useApiKeyStore } from '@/stores/apiKeyStore'

// props
defineProps<{
  generating: boolean
}>()

const emit = defineEmits<{
  (e: 'generate', text: string, model: string, isSmartMode: boolean): void
}>()

// refs
const toast = ref<InstanceType<typeof ToastMessage> | null>(null)

const descriptor = ref('')
const isSmartMode = ref(false)

// stores
const apiKeyStore = useApiKeyStore()
const isKeyVerified = computed(() => apiKeyStore.isKeyVerified)
const selectedModel = computed(() => apiKeyStore.selectedModel)

// methods
const handleGenerate = async () => {
  if (isSmartMode.value && !isKeyVerified.value) {
    toast.value?.show('请先验证API Key', 3000)
    return
  }
  if (!descriptor.value.trim()) {
    toast.value?.show('请输入场景描述', 3000)
    return
  }

  emit('generate', descriptor.value, selectedModel.value, isSmartMode.value)
}

const handleClear = () => {
  descriptor.value = ''
}

const handleModeChange = () => {
  console.log(`分镜模式切换为: ${isSmartMode.value ? '智能分镜' : '手动分镜'}`)
}

// init
onMounted(async () => {
  try {
    if (!isKeyVerified.value) {
      await apiKeyStore.initialize()
    }
  } catch (error) {
    console.error('API Key初始化失败:', error)
    toast.value?.show('API Key验证失败，请稍后重试', 4000)
  }
})
</script>

<style scoped>
.storyboard-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  height: 100%;
  width: 100%;
}

.input-section {
  display: flex;
  flex-direction: column;
  height: 80%;
}

.input-section .el-form {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.input-section .el-form-item:first-child {
  flex: 1;
  margin-bottom: 0;
}

.input-section .el-form-item:first-child .el-form-item__content,
.input-section .el-form-item:first-child .el-textarea,
.input-section .el-form-item:first-child .el-textarea__inner {
  height: 100%;
  resize: none;
  min-height: unset;
}

.button-group {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.generate-button {
  flex: 2;
}

.clear-button {
  flex: 1;
}

.mode-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
</style>
